<template>
	<view class="content">
		<image class="top-bg" src="../../static/image/big-top-bg.png" mode="aspectFill"></image>
		<view class="title-btn-box r-nw-fs-c"
			:style="{'height':navBarHeight + 'px', 'marginTop': statusBarHeight + 'px'}">
			<image class="icon-back" src="../../static/image/back.png" mode="widthFix" @click="goToBack()">
			</image>
			<text class="page-title" style="width: 750rpx">订单详情</text>
		</view>
		<view class="unpaid-time">
			<view class="unpaid">{{staus[detailInfo.status]}}</view>
			<view class="time" v-if="remainPayTime && detailInfo.status === 0">
				剩余支付时间：
				<uni-countdown style="display: inline-block;" :font-size="12" color="#fff" :day="day" :hour="hour" :minute="minute" :second="second"  @timeup="timeup" />
			</view>
		</view>
		<scroll-view class="scroll" scroll-y >
			<view class="basic-info-box">
				<view class="r-nw-sb-c">
					<view class="time-dec c-c-fs ellipsis">
						<text>{{detailInfo.order_car.name || ''}}</text>
						<text class="dec">{{detailInfo.order_car.describe || ''}}</text>
					</view>
					<image class="img" :src="detailInfo.order_car.cover" mode="aspectFit"></image>
				</view>
				<view class="address-box">
					<view class="address-title">
						取车地点
					</view>
					<view class="address">
						{{detailInfo.city || ''}} {{detailInfo.address || ''}}
					</view>
				</view>
				<view class="address-box times-total-num">
					<view class="left r-nw-sb-c">
						<view class="address-title">
							使用时间
						</view>
						<view class="total-num c-c-c">
							共 {{detailInfo.day || 0}} 天
						</view>
					</view>
					<view class="times">
						{{detailInfo.start_date || ''}}—{{detailInfo.end_date || ''}}
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image style="width: 44rpx;height: 44rpx;" src="../../static/image/expense-icon.png" mode="aspectFit"></image>
					<text class="title">费用明细</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">租赁费用</text>
					<text class="text">￥{{detailInfo.price || 0}}*{{detailInfo.day || 0}} 天</text>
				</view>
				<!-- <view class="explain-text r-nw-sb-c">
					<text class="explain">清洁费</text>
					<text class="text">{{detailInfo.cleaning_fee || 0}}</text>
				</view> -->
				<view class="explain-text r-nw-sb-c">
					<text class="explain">服务费</text>
					<text class="text">{{detailInfo.service_fee || 0}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain" style="color: #333;">总价</text>
					<text class="text" style="font-weight: 600;">{{detailInfo.total_price || 0}}</text>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/user.png" mode="aspectFit"></image>
					<text class="title">租车人</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">姓名</text>
					<text class="text">{{detailInfo.order_lessee.name || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">电话</text>
					<text class="text">{{detailInfo.order_lessee.phone || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">身份证号</text>
					<text class="text">{{detailInfo.order_lessee.id_card || ''}}</text>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/out.png" mode="aspectFit"></image>
					<text class="title">出行保障</text>
				</view>
				<view class="insurance-box c-c-fs" :style="{color: detailInfo.order_insurance.level == 1 ? '#09B8A9' : detailInfo.order_insurance.level == 2 ? '#E5820B' : '#EC2F12' }">{{detailInfo.order_insurance.name}}</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">车损</text>
					<text class="text">{{detailInfo.order_insurance.car_damage || ''}}{{detailInfo.order_insurance.car_damage_sub|| ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">三者总额</text>
					<text class="text">{{detailInfo.order_insurance.tripartite || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">乘客保障</text>
					<text class="text">{{detailInfo.order_insurance.passenger || ''}}</text>
				</view>
			</view>
			<view class="card-box">
				<view class="r-nw-fs-c">
					<image class="icon" src="../../static/image/order-icon.png" mode="aspectFit"></image>
					<text class="title">订单信息</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">订单号</text>
					<text class="text">{{detailInfo.no || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">下单时间</text>
					<text class="text">{{detailInfo.date || ''}}</text>
				</view>
				<view class="explain-text r-nw-sb-c" v-if="detailInfo.pay_date">
					<text class="explain">支付时间</text>
					<text class="text">{{detailInfo.pay_date || ''}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="btns r-nw-sb-c">
			<view class="cancel c-c-c" @click="goToBack">
				返回
			</view>
			<!-- 待支付 -->
			<button class="pay-btn r-nw-c-c" :loading="payLoading" @click="goToPay" v-if="(remainPayTime && detailInfo.status === 0) || isLose">
				￥{{detailInfo.total_price}}  去支付
			</button>
			<!-- 进行中：1.交车前（取消订单）2.交车后（确认还车） -->
			<view class="pay-btn c-c-c" @click="cancelOrder" v-if="detailInfo.status == 1 && canleOrder">
				取消订单
			</view>
			<view class="pay-btn c-c-c" @click="goToEarlyReturn" v-if="detailInfo.status == 1 && confirmCart">
				确认还车
			</view>
		</view>
	</view>
</template>

<script>
	import { throttle} from "@/utils/public.js"
	import { STATUS } from "@/utils/constants.js";
	import { orderDetail, payParameter, cancel, returnCart } from "@/utils/api.js"
	const app = getApp();
	export default {
		data() {
			return {
				navBarHeight: app.globalData.navBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				orderId: '',
				detailInfo: {},
				canleOrder: false,
				confirmCart: false,
				timer: null,
				day: 0,
				hour: 0,
				minute: 0,
				second: 0,
				remainPayTime: false,
				isLose: false, // 失效
				staus: {},
				payLoading: false,
				
			}
		},
		onLoad(option) {
			this.orderId = option?.id;
			this.staus = STATUS;
			this.getDetailInfo();
		},
		methods: {
			// 倒计时时间到回调
			timeup() {
				this.isLose = true;
			},
			countdown(endTime, startTime) {
				// var endTime=+new Date();//返回当前时间总的毫秒数
				// var startTime=+new Date(time);//返回用户输入的截止时间
				let res = endTime - startTime; //剩余时间总的毫秒数
				res = res / 1000; //毫秒换算成秒
				let d = parseInt(res/60/60/24); //天
				this.day = d < 10 ? '0' + d : d;
				let h = parseInt(res/60/60%24); //时
				this.hour = h < 10 ? '0' + h : h;
				let m = parseInt(res/60%60); //分
				this.minute = m < 10 ? '0' + m : m;
				let s = parseInt(res%60); //秒
				this.second= s < 10 ? '0' + s : s;
			},
			// 取消
			goToBack() {
				uni.navigateBack()
			},
			// 获取详情信息
			getDetailInfo() {
				uni.showLoading({title: '加载中...'});
				orderDetail(this.orderId).then(res => {
					if(res.code === 200) {
						// 当前时间小于支付结束时间，则订单可取消；如大于，则可选择提前还车；
						// 状态为待支付且当前时间小于支付结束时间时页面需展示倒计时
						if(res.data.curren_time < res.data.pay_lapse_time) {
							this.canleOrder = true;
							this.remainPayTime = true;
							this.countdown(res.data.pay_lapse_time, res.data.curren_time);
						} else if(res.data.curren_time > res.data.pay_lapse_time){
							this.confirmCart = true;
							this.remainPayTime = false;
						}
						this.detailInfo = res.data;
						uni.hideLoading();
					}
				})
			},
			// 提前还车
			goToEarlyReturn: throttle(function() {
				uni.showModal({
					title: '提示',
					content: '您确定要取消提前还车吗？',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							returnCart(this.orderId).then(res => {
								if(res.code === 200) {
									uni.showToast({
										icon: 'none',
										title: '您已提前还车'
									})
									this.getDetailInfo();
								}
							})
						}
					}
				})
			}, 500),
			// 取消订单
			cancelOrder() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							cancel(that.orderId).then(res => {
								if(res.code === 200) {
									uni.showToast({
										icon: 'none',
										title: '您已取消订单'
									})
									that.getDetailInfo();
								}
							})
						} 
					}
				})
			},
			// 立即支付
			goToPay () {
				if(this.payLoading) {
					uni.showToast({
						icon: 'icon',
						title: '请勿重复提交'
					})
					return;
				}
				this.payLoading = true;
				// 获取支付参数
				payParameter(this.orderId).then(res => {
					if(res.code === 200) {
						this.payLoading = false;
						let paymentData = res.data;
						// // 删除
						// uni.showToast({title: '支付成功', icon: 'none'});
						// setTimeout(() => {
						// 	uni.navigateBack();
						// }, 500)
						uni.requestPayment({
							provider: 'wxpay',//wxpay微信 alipay支付宝
							timeStamp: paymentData.timeStamp,
							nonceStr: paymentData.nonceStr,
							package: paymentData.package,
							signType: paymentData.signType,
							paysign: paymentData.paysign,
							success: function(res) {
								uni.showToast({title: '支付成功', icon: 'none'});
								setTimeout(() => {
									uni.navigateBack();
								}, 500)
							},
							// 参数有问题则抛出错误
							fail: function(err) {
								uni.showToast({title: '支付失败', icon: 'none'})
							},
						})
					}
				})
				setTimeout(() => {
					this.payLoading = false;
				}, 2000)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}
	/deep/ .uni-countdown__splitor {
		color: #fff !important;
	}
	button {
		margin: 0;
		padding: 0;
		background-color: #fff;
	}
	.card-box {
		margin: 22rpx auto 0;
		padding: 32rpx 24rpx;
		width: 638rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		.icon {
			width: 36rpx;
			height: 36rpx;
		}
		.title {
			margin-left: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
		}
		.explain-text {
			margin-top: 32rpx;
			.explain {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.insurance-box {
			margin-top: 26rpx;
			width: 638rpx;
			height: 88rpx;
			background: linear-gradient( 90deg, #FFF7F7 0%, #FFFFFF 100%);
			border-radius: 16rpx 8rpx 0rpx 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #EC2F12;
			line-height: 40rpx;
		}
	}
	.content {
		height: 100vh;
		position: relative;
		.top-bg {
			width: 750rpx;
			height: 716rpx;
		}
		.title-btn-box {
			position: absolute;
			top: 0;
			z-index: 99;
		}
		.unpaid-time {
			position: absolute;
			top: 180rpx;
			left: 53rpx;
			z-index: 99;
			.unpaid {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
			.time {
				margin-top: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
		}
		.scroll {
			position: absolute;
			top: 286rpx;
			bottom: 160rpx;
			z-index: 99;
			.basic-info-box {
				margin: 32rpx auto 0;
				padding: 32rpx;
				width: 622rpx;
				border-radius: 24rpx;
				background-color: #FFFFFF;
				.time-dec {
					width: 380rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					.dec {
						display: inline-block;
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
					}
				}
				.img {
					width: 219rpx;
					height: 150rpx;
					flex-shrink: 0;
				}
				.address-box {
					margin-top: 34rpx;
					padding: 32rpx 0;
					border-top: 2rpx solid #F5F5F5;
					border-bottom: 2rpx solid #F5F5F5;
					.address-title {
						font-size: 24rpx;
						color: #666;
					}
					.address {
						margin-top: 17rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
				.times-total-num {
					margin-top: 0;
					border: 0;
					padding-bottom: 0;
					.times {
						margin-top: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.total-num {
						width: 110rpx;
						height: 48rpx;
						background: #FFE9C6;
						border-radius: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-size: 26rpx;
						color: #783700;
						line-height: 40rpx;
					}
				}
			}
		}

	}
	.btns {
		padding: 0 24rpx 16rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 702rpx;
		height: 120rpx;
		background: #FFFFFF;
		.cancel {
			// width: 200rpx;
			flex: 1;
			height: 88rpx;
			background: #FCFBFC;
			border-radius: 16rpx;
			border: 2rpx solid #E5E6E5;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}
		.pay-btn {
			flex-shrink: 0;
			margin-left: 18rpx;
			width: 484rpx;
			height: 88rpx;
			background: linear-gradient( 270deg, #FF7F00 0%, #FF3735 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}
	}
</style>